<template>
  <span v-if="props.showText">{{ numberValue }}</span>
  <span v-else :class="['input-number', $slots.append ? 'append' : '']">
    <el-input-number 
      v-model="numberValue"
      :controls="false" 
      :precision="precision" 
      :max="max"
      @change="handleChange" 
      @blur="handleBlur"
    />
    <span class="append-box" v-if="$slots.append">
      <slot name="append" />
    </span>
  </span>
</template>

<script setup>
import {ref, watch} from 'vue';

const emit = defineEmits(['update:modelValue', 'change', 'blur']);
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  point: {
    type: [String, Number],
    default: 1
  },
  max: {
    type: Number,
    default: 2147483647
  },
  placeholder: String,
  showText: Boolean,
});

const numberValue = ref(undefined);
const precision = ref(parseInt((props.point || '0')));

const handleChange = ($event) => {
  emit('update:modelValue', numberValue.value);
  emit('change', $event);
};

const handleBlur = ($event) => {
  emit('update:modelValue', numberValue.value);
  emit('blur', $event);
};

watch(() => props.modelValue, (newVal) => {
  if (typeof newVal === "undefined"|| newVal == null || newVal === '') {
    numberValue.value = undefined;
  } else {
    numberValue.value = parseFloat(newVal + '');
  }
  emit('update:modelValue', numberValue.value);
});
</script>

<style scoped>
.input-number {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.input-number :deep(.el-input-number) {
  width: 100%;
}
.input-number :deep(.el-input-number--small) {
  padding: 0;
  text-align: left;
  width: 100%;
}
.input-number :deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.input-number.append :deep(.el-input__wrapper) {
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;;
}
.input-number :deep(.append-box) {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
}
</style>